import React, { Component } from 'react';
import {
    Layout, 
    Menu, 
    Breadcrumb, 
    Icon,
} from 'antd';
import { Link } from "react-router-dom";
import './index.css';

const { Header, Content, Footer, Sider } = Layout;

const SubMenu = Menu.SubMenu;

class SiderDemo extends Component {
    state = {
      collapsed: false,
    };
  
    onCollapse = (collapsed) => {
      console.log(collapsed);
      this.setState({ collapsed });
    }
  
    render() {
      return (
        <Layout style={{ minHeight: '100vh' }}>
          <Sider
            collapsible
            collapsed={this.state.collapsed}
            onCollapse={this.onCollapse}
          >
            <div className="logo" />
            <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
              <SubMenu
                key="sub1"
                title={<span><Icon type="user" /><span>User</span></span>}
              >
                <Menu.Item key="3">
                  <Link to="/">
                    DouBanMovie
                  </Link>
                </Menu.Item>
                <Menu.Item key="4">
                  <Link to="/addtodo">
                    AddTodo
                  </Link>
                </Menu.Item>
                <Menu.Item key="5">Alex</Menu.Item>
              </SubMenu>
              <SubMenu
                key="sub2"
                title={<span><Icon type="team" /><span>Team</span></span>}
              >
                <Menu.Item key="6">Team 1</Menu.Item>
                <Menu.Item key="8">Team 2</Menu.Item>
              </SubMenu>
              <Menu.Item key="9">
                <Icon type="file" />
                <span>File</span>
              </Menu.Item>
            </Menu>
          </Sider>
          <Layout>
            <Header style={{ background: '#fff', padding: 0 }} />
            <Content style={{ margin: '5px' }}>
              <div style={{ padding: 24, background: '#fff', minHeight: '100%', overflowY: "scroll" }}>
                {this.props.children}
              </div>
            </Content>
            <Footer style={{ textAlign: 'center' }}>
              react redux 练习
            </Footer>
          </Layout>
        </Layout>
      );
    }
}

export default SiderDemo;

  